<template>
  <div class="system-config-container">
    <el-card class="config-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <h2>系统配置</h2>
          <el-button :loading="saving" type="primary" @click="saveConfig">
            保存配置
          </el-button>
        </div>
      </template>

      <el-form
          :model="configForm"
          class="config-form"
          label-position="left"
          label-width="180px"
      >

        <!-- 系统参数配置 -->
        <el-divider content-position="left">系统参数</el-divider>

        <el-form-item label="系统名称" required>
          <el-input
              v-model="configForm.systemName"
              clearable
              placeholder="请输入系统名称"
              style="width: 300px"
          />
        </el-form-item>

        <el-form-item label="会话超时时间(分钟)">
          <el-input-number
              v-model="configForm.sessionTimeout"
              :max="1440"
              :min="5"
              controls-position="right"
          />
          <span class="form-tip">用户无操作后的自动登出时间</span>
        </el-form-item>

        <!-- 通知配置 -->
        <el-divider content-position="left">文件浏览器设置</el-divider>

        <el-form-item label="文件存储类型">
          <el-switch
              v-model="configForm.fileStorageTypeFlag"
              active-text="minio存储"
              class="ml-2"
              inactive-text="本地存储"
              inline-prompt
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949; margin-left: 10px"
              @change="handleFileStorageTypeSwitch"
          />
        </el-form-item>

        <el-form-item v-if="!configForm.fileStorageTypeFlag" label="本地存储时服务器路径">
          <el-input
              v-model="configForm.localFileStoragePath"
              clearable
              placeholder="请输入数据备份路径"
              style="width: 400px"
          >
          </el-input>
        </el-form-item>

        <!-- 高级配置 -->
        <el-divider content-position="left">高级配置</el-divider>


        <el-form-item label="系统日志级别">
          <el-radio-group v-model="configForm.logLevel">
            <el-radio-button label="debug">Debug</el-radio-button>
            <el-radio-button label="info">Info</el-radio-button>
            <el-radio-button label="warn">Warn</el-radio-button>
            <el-radio-button label="error">Error</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="系统描述">
          <el-input
              v-model="configForm.systemDescription"
              :rows="3"
              maxlength="200"
              placeholder="请输入系统描述"
              show-word-limit
              style="width: 500px"
              type="textarea"
          />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted} from 'vue'
import {saveOrUpdateSysConfig} from "@/api/system/sysConfig";
import {message} from "@/utils/ElmessasgeUtils";
import {useMainStore} from "@/main";

const mainStore = useMainStore()


const saving = ref(false)

const configForm = ref({
  systemName: '', // 系统名称
  fileStorageTypeFlag: true,  // 文件浏览器存储类型
  sessionTimeout: 30,
  localFileStoragePath: '/home',
  logLevel: 'info',
  systemDescription: '这是系统的描述信息，用于说明系统的主要功能和用途。'
})


// 切换文件存储类型
function handleFileStorageTypeSwitch(val: any) {
  if (val) {

  } else {

  }
}

const saveConfig = () => {
  //TODO: 系统配置管理
  saving.value = true

  console.log("from", configForm.value)

  saveOrUpdateSysConfig("systemConfig", JSON.stringify(configForm.value)).then((res: any) => {
    if (res.data.code == 200) {
      message("保存配置成功", 'success')
      // 保存后刷新store
      // mainStore.updateConfig()
    } else {
      message("保存配置失败", 'error')
    }
  })

  saving.value = false
}


function freshSysConfig() {

  configForm.value.fileStorageTypeFlag = mainStore.fileStorageType
  configForm.value.systemName = mainStore.systemName
  configForm.value.localFileStoragePath = mainStore.localFileStoragePath
  configForm.value.systemDescription = mainStore.systemDescription

}

onMounted(() => {
  freshSysConfig();
})

</script>

<style lang="scss" scoped>
.system-config-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);

  .config-card {
    border-radius: 8px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h2 {
        margin: 0;
        color: #303133;
        font-size: 20px;
      }
    }
  }

  .config-form {
    padding: 0 20px;

    .el-divider {
      margin: 30px 0 20px;
    }

    .el-form-item {
      margin-bottom: 22px;

      &:last-child {
        margin-bottom: 10px;
      }
    }

    .form-tip {
      margin-left: 10px;
      font-size: 12px;
      color: #909399;
    }
  }
}

:deep(.el-input-group__append) {
  padding: 0 10px;
}
</style>